<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ include file="/commons/taglibs.jsp" %>
<html>
<head>
<%@ include file="/commons/script.jsp" %>
<script type="text/javascript" src="${ctx }/assets/js/tree.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<div class="widget-box widget-color-blue2">
<div class="widget-header">
	<h4 class="widget-title lighter smaller">Choose Categories</h4>
</div>
<div class="widget-body">
　　<div class="widget-main padding-8">
		<ul id="tree1"></ul>
	</div>
</div>
</div>
<div>
<button id="submit-button">提交</button>
</div>
</body>
<script type="text/javascript">

jQuery(function($){
var selectedItemsAndParents = function() {
	  var $sel = this.$element.find(".tree-selected");
	  var data = [];
	  $.each($sel,
	    function(index, value) {
	      data.push($(value).data());
	      var $parent = $(value).parents("li");
	      $.each($parent,function(index_parent,p){
	        if(typeof($(p).attr("role"))!="undefined") {
	          var result = $.inArray($(p).data(), data);
	          if(result==-1){
	            data.push($(p).data());
	          }
	        }	
	      });
	  });
	  return data
};
$('#submit-button').on('click', function() {
	var output = '';
	var items = $('#tree1').tree('selectedItemsAndParents');//这个是我自己扩展的方法，框架应是selectedItems
	for(var i in items) if (items.hasOwnProperty(i)) {
	var item = items[i];
	output += item.additionalParameters['id'] + ":"+ item.name+"\n";//获取附加属性
	}
	alert(output)
});
var dataSource1 = function(options, callback){
	var $data = null
	if(!("name" in options) && !("type" in options)){
		//$data = tree_data;//the root tree
		//callback({ data: $data });
		$.ajax({
			url: "${ctx}/sysMenu/getMenuTree",
			type: 'POST',
			dataType: 'json',
			success : function(response) {
				$data = response;
					//alert(response)
					callback({ data: $data })
				},
			error: function(response) {
			//console.log(response);
			}
		});
		return;
	}
	else if("type" in options && options.type == "folder") {
		if("additionalParameters" in options && "children" in options.additionalParameters)
			$data = options.additionalParameters.children || {};
		else $data = {}//no data
	}
	
	if($data != null)//this setTimeout is only for mimicking some random delay
		setTimeout(function(){callback({ data: $data });} , parseInt(Math.random() * 500) + 200);

	//we have used static data here
	//but you can retrieve your data dynamically from a server using ajax call
	//checkout examples/treeview.html and examples/treeview.js for more info
}


	$('#tree1').ace_tree({
		dataSource: dataSource1,
		multiSelect: true,
		cacheItems: true,
		'open-icon' : 'ace-icon tree-minus',
		'close-icon' : 'ace-icon tree-plus',
		'itemSelect' : true,
		'folderSelect': false,
		'selected-icon' : 'ace-icon fa fa-check',
		'unselected-icon' : 'ace-icon fa fa-times',
		loadingHTML : '<div class="tree-loading"><i class="ace-icon fa fa-refresh fa-spin blue"></i></div>'
	});
	

});
		</script>
</html>
